<script setup>
import "ol/ol.css"
import Map from 'ol/Map.js';
import {Feature, Overlay, View} from "ol";
import {onMounted} from "vue";
import getTDTLayer from "@/js/UseTDT2305.js";
import {registerCGCS2000} from "@/js/UseTDT2305.js";
import VectorLayer from "ol/layer/Vector.js";

import {GeoJSON, WFS} from "ol/format.js";
import VectorSource from "ol/source/Vector.js";
import Select from "ol/interaction/Select.js";
import {DragBox} from "ol/interaction.js";
import {platformModifierKeyOnly} from "ol/events/condition.js";
import {getCenter} from "ol/extent.js";



let map
const vector_source = new VectorSource({
  url: 'http://localhost:8080/geoserver/webgis2305/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=webgis2305%3Abou2_4p&outputFormat=application%2Fjson',
  format: new GeoJSON({
    dataProjection: 'EPSG:4326',
    featureProjection: 'EPSG:4490'
  })
})

const vector_layer = new VectorLayer({
  source: vector_source
})
const tdt_ter = getTDTLayer('地形晕渲','经纬度投影','d06c497b107f57ebd6a0f8fbf967292d')
let propertyOverlay
let select
const initMap = () => {
  registerCGCS2000()
  propertyOverlay = new Overlay({
    element: document.getElementById('popup'),
  })
  // 初始化地图
 map = new Map({
    target: 'map',
    layers: [tdt_ter, vector_layer],
    view: new View({
      center: [116, 30],
      zoom: 3,
      projection: 'EPSG:4490'
    })
  })
  map.addOverlay(propertyOverlay)
}
onMounted(initMap)
//定义查询
const querySelect = () => {
  select = new Select()
  map.addInteraction(select)

  select.on('select',(evt)=>{
    const coorrd = evt.mapBrowserEvent.coordinate
    const selected = select.getFeatures().getArray()

    // console.log(select.getFeatures().forEach((feature)=>{
    //   console.log(feature.get('name'))
    // }))
    let names = ''

    selected.forEach((feature)=>{
      names = names + '  ' + feature.get('name')
      console.log(names)
    })
    document.getElementById('popup-content').innerText = names
    propertyOverlay.setPosition(coorrd)
})
}

const queryBybox = () => {
  const box = new DragBox({
    condition: platformModifierKeyOnly
  })
  map.addInteraction(box)
  box.on('boxend', (evt) => {
    const extent = box.getGeometry().getExtent()
    const coord = getCenter(extent)
    let names = []
    vector_source.forEachFeatureIntersectingExtent(extent, (feature) => {
      names.push(feature.get('name'))
      document.getElementById('popup-content').innerText = names.join(', ')
      propertyOverlay.setPosition(coord)
    })
  })
}

const close = () => {
  propertyOverlay.setPosition(null)
  if (select) {
    map.removeInteraction(select)
    select = null
  }
}
</script>

<template>
  <div class="edittools">
    <button @click="querySelect">点选查询</button>
    <button @click="queryBybox">框选查询</button>
  </div>
<div id="map"></div>

  <div id="popup">
    <a href="#" id="popup-closer" @click="close"></a>
    <div id="popup-content"></div>
  </div>
</template>

<style scoped>
#map{
  width: 100%;
  height: 700px;
}

.edittools{
  position: absolute;
  top:10px;
  left: 35px;
  z-index: 2;
  opacity: 0.5;
}

.edittools button{
  width: 75px;
  height: 30px;
}

#popup {
  position: absolute;
  background-color: white;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #CCCCCC;
  min-width: 280px;
  z-index: 1;
}

#popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

#popup-closer:after {
  content: "✖";
}
</style>